<style>
    legend {
        padding-bottom: 5px;
        font-size: 14px;
        font-weight: 600;
        padding-left: 10px;
        padding-right: 15px;
        color: #6a6a6a;
        margin-bottom: 8px;
    }
    .faupload-preview li{
        width: 50%;
    }
    .empty-hint{
        text-align: center;
        margin-top: 30px;
        font-size: 20px;
        color: #d3d3d3;
    }

    div ::-webkit-scrollbar {
        /*滚动条整体*/
        width: 8px;
        height: 8px;
        border-radius: 5px;
    }
    div ::-webkit-scrollbar-track {
        /*滚动条轨道*/
        background: #e3e3e3;
        border-radius: 2px;
    }
    div ::-webkit-scrollbar-thumb {
        /*滚动条里面的滑块*/
        background: #d1d1d1;
        border-radius: 2px;
    }
    div ::-webkit-scrollbar-thumb:hover {
        /*滚动条鼠标事件，鼠标放上去出现的事件*/
        background: #a8a8a8;
    }
    div ::-webkit-scrollbar-corner {
        /*滚动条边角*/
        background: #a8a8a8;
    }
    .box-title{
        font-size: 14px!important;
    }
    form{
        margin-top: 16px;
    }
    .success table td{
        text-align: left;
    }
    .success table tr td:first-child{
        color: grey;
    }
    .error,.success{
        padding: 0 15px 15px 15px;
        text-align: left;
    }
    .result{
        position: relative;
        text-align: center;
    }
    .stamp{
        position: absolute;
        right: 10%;
    }
    #ebill-content{
        height: calc(100vh - 240px);
        width: 100%;
    }
</style>
<div class="content">
    <div class="box">
        <div class="box-header with-border">
            <span class="box-title">电子表单验证</span>
        </div>
        <div class="box-body">
            <div class="col-5 col-sm-5 col-xs-12 preview">
                <legend>上传已发起签章的电子表单（pdf）</legend>
                <form id="stamp-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
                    <div class="form-group">
                        <label class="control-label col-xs-12 col-sm-2">{:__('File')}:</label>
                        <div class="col-xs-12 col-sm-8">
                            <div class="input-group">
                                <input id="ebill-file" class="form-control" size="50" name="row[file]" data-rule="required" type="text" disabled="disabled">
                                <div class="input-group-addon no-border no-padding">
                                    <span><button type="button" id="faupload-file" data-mimetype=".pdf" class="btn btn-danger faupload" data-input-id="ebill-file" data-multiple="false" data-preview-id="file-preview"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
                <hr>
                <div id="ebill-content" class="hidden">
                    <iframe id="ebill-iframe" data-src="{:url('/fastflow/flow/ebill/preview')}" style="width: 100%;height: 100%;border: none;overflow: auto;margin-left: -4px;"></iframe>
                </div>
            </div>
            <div class="col-7 col-sm-7 col-xs-12" style="border-left: 1px solid #e2e2e2">
                <legend>验证结果</legend>
                <div class="result">
                    <i class="fa fa-dropbox empty-hint"> 未上传签章文件</i>
                    <div class="error hidden">
                        <image class="stamp" src=""></image>
                        <hr>
                        <p class="text-muted text-left"><strong >失败可能有下列原因：</strong></p>
                        <p class="text-muted text-left">
                            1. 该单据未发起签章
                        </p>
                        <p class="text-muted text-left">
                            2. 电子表单已被 <b class="text-red">篡改</b>
                        </p>
                        <p class="text-muted text-left">
                            3. 单子表单 <b class="text-warning">非最终</b> 签章文件
                        </p>
                        <hr>
                    </div>

                </div>
                <script id="successTpl" type="text/html">
                    <div class="success">
                        <image class="stamp" src=""></image>
                        <table class="table table-striped">
                            <tbody>
                            <tr>
                                <td>单据</td>
                                <td><%=info.bill_name%></td>
                            </tr>
                            <tr>
                                <td>单据ID</td>
                                <td>
                                    <a title="<%=info.bill_name%>：<%=info.bill_id%>" data-area='["95%","95%"]' href="{:url('/fastflow/flow/flow/detail')}?bill=<%=info.bill%>&bill_id=<%=info.bill_id%>" class="btn btn-info btn-xs btn-dialog">
                                        <i class="fa fa-eye"> <%=info.bill_id%></i>
                                    </a>
                                </td>
                            </tr>
                            <tr>
                                <td>电子表单</td>
                                <td><%=info.ebill_copy.title%></td>
                            </tr>
                            <tr>
                                <td>数字证书</td>
                                <td>
                                    <%if(info.has_certificate == 1){%>
                                    <i class="fa fa-check-circle text-success"> 有数字证书</i>
                                    <%}else{%>
                                    <i class="fa fa-times-circle text-danger"> 无数字证书</i>
                                    <%}%>
                                </td>
                            </tr>
                            <tr>
                                <td>发起人</td>
                                <td><%=info.admin.nickname%></td>
                            </tr>
                            <tr>
                                <td>发起时间</td>
                                <td><%=info.createtime%></td>
                            </tr>
                            <tr>
                                <td>最后更新时间</td>
                                <td><%=info.updatetime%></td>
                            </tr>
                            <tr>
                                <td>签章状态</td>
                                <td>
                                    <%if(info.status == 1){%>
                                    <span class="label label-success">已完成</span>
                                    <%}else{%>
                                    <span class="label label-warning">待签章</span>
                                    <%}%>

                                </td>
                            </tr>
                            <tr>
                                <td>签章人员</td>
                                <td><%=info.signers%></td>
                            </tr>
                            <tr>
                                <td>已签人员</td>
                                <td><%=info.stamped%></td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </script>
            </div>
        </div>
    </div>

</div>

